<template>
  <GlobalContainer showTabBar className="!bg-[#F3F3F3]" :needCheckBindRoom="true">
    <GlobalHeader />
    <div class="absolute left-0 top-0 z-0 h-screen w-screen">
      <image class="absolute left-0 top-0 size-full" :src="`${OSS_URL}/images/my/my_bg.png`" />
    </div>
    <div class="z-1 relative mt-16">
      <div class="userInfo relative ml-52 flex items-center">
        <div class="user-avatar mr-30">
          <image class="size-140" :src="`${OSS_URL}/images/my/avatar_icon.png`" />
        </div>
        <div class="user-info">
          <template v-if="token">
            <div class="user-name text-38 leading-56 flex items-center text-[#303133]">
              <span>{{ userInfo.realName || userInfo.userName || userInfo.phone || '匿名用户' }}</span>
              <image
                class="ml-20 size-36"
                src="../../static/images/my/edit_icon.png"
                @tap.stop="toPageHandle('/subPages/userInfoEdit/index')"
              />
            </div>
            <div class="user-id text-32 leading-48 mt-16 text-[#606266]">{{ userInfo.phone || '-' }}</div>
          </template>
          <template v-else>
            <div class="user-name text-38 leading-56 text-[#303133]">未登录</div>
            <div class="user-id text-32 leading-48 mt-16 text-[#606266]">立即登录</div>
          </template>
        </div>
        <LoginButton v-if="!token" />
      </div>

      <div class="min-h-200 w-648 relative mx-auto mt-48 p-36 text-white" @tap.stop="toPageHandle('/subPages/home/index')">
        <image class="absolute left-0 top-0 size-full" :src="`${OSS_URL}/images/my/home_bg.png`" />
        <div class="z-1 relative">
          <div class="flex">
            <template v-if="token">
              <span class="text-34 leading-50">{{ accountStore.roomInfo }}</span>
              <image class="ml-auto size-48" src="../../static/images/my/home_right_icon.png" />
            </template>
            <template v-else>
              <span class="text-34 leading-50">我的房屋</span>
            </template>
          </div>
          <div v-if="token" class="text-30 leading-45 mt-24 flex font-normal">
            <span class="text-30 leading-45">我的房屋</span>
            <div class="h-42 mx-20 w-2 bg-white" />
            <span class="text-30 leading-45">{{ accountStore.currentRoom.communityMemberBuildingRecordNum || 0 }}位成员</span>
            <div class="h-58 w-152 rounded-40 text-30 leading-58 ml-auto bg-[rgba(255,255,255,0.7)] text-center text-[#0062E5]">
              切换房屋
            </div>
          </div>
          <div v-else class="text-30 leading-45 mt-24 flex font-normal">
            <span class="text-30 leading-45">登录后查看我的房屋信息</span>
          </div>
        </div>
        <LoginButton v-if="!token" />
      </div>

      <!-- 订单 -->
      <div class="order-box w-702 rounded-20 py-30 relative mx-auto pl-24 pr-32" @tap.stop="toPageHandle('/subPages/wuye/log')">
        <div class="flex items-center">
          <image class="size-140 mr-16" :src="`${OSS_URL}/images/my/order_icon.png`" />
          <div>
            <div class="text-34 leading-50 text-[#353535]">物业+养老订单</div>
            <div v-if="token" class="text-28 leading-42 mt-10 text-[#909399]">查看全部订单</div>
            <div v-else class="text-28 leading-42 mt-10 text-[#909399]">登录后查看全部订单</div>
          </div>
          <div class="ml-auto">
            <image class="size-42" src="../../static/images/baoxiu/right_icon.png" />
          </div>
        </div>
        <LoginButton v-if="!token" />
      </div>

      <div class="box-shadow mt-30 w-702 rounded-20 mx-auto bg-white p-32 pb-20">
        <div class="title mb-20 flex items-center justify-center">
          <image class="h-8 w-60" src="../../static/images/my/title_left_icon.png" />
          <div class="text-34 leading-50 mx-10 text-[#353535]">通用</div>
          <image class="h-8 w-60" src="../../static/images/my/title_right_icon.png" />
        </div>
        <div class="cell-item" @tap.stop="toPageHandle('/subPages/yinsi_zhengce/xieyi')">
          <image class="mr-20 size-44" src="../../static/images/my/file_icon.png" />
          <div class="text-30 leading-48 font-normal text-[#3C4761]">用户协议</div>
          <image class="size-38 ml-auto" src="../../static/images/baoxiu/right_icon.png" />
        </div>
        <div class="cell-item" @tap.stop="toPageHandle('/subPages/yinsi_zhengce/yinsi')">
          <image class="mr-20 size-44" src="../../static/images/my/yinsi_icon.png" />
          <div class="text-30 leading-48 font-normal text-[#3C4761]">隐私政策</div>
          <image class="size-38 ml-auto" src="../../static/images/baoxiu/right_icon.png" />
        </div>
      </div>
      <div class="box-shadow mt-30 w-702 mx-auto pb-20" v-if="token">
        <div class="h-100 rounded-12 text-30 leading-100 w-full bg-white text-center text-[#1E90FF]" @tap.stop="logoutHandle">退出登录</div>
      </div>
    </div>
  </GlobalContainer>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import LoginButton from '@/components/loginButton/index.vue'
import { useAccountStore } from '@/store'
import { showToast } from '@/utils'

const OSS_URL = import.meta.env.VITE_OSS_URL
const accountStore = useAccountStore()
const token = computed(() => accountStore.token)
const userInfo = computed(() => accountStore.userInfo)
const toPageHandle = (page: string) => {
  if (!token.value) {
    return showToast('账户未登录')
  }
  uni.navigateTo({
    url: page
  })
}

const logoutHandle = () => {
  accountStore.logout()
}
</script>

<style lang="scss">
.order-box {
  background-color: #fff;
  box-shadow: 0rpx -8rpx 24rpx 0rpx rgba(1, 38, 89, 0.12);
  border-radius: 20rpx 20rpx 20rpx 20rpx;
}
.cell-item {
  display: flex;
  align-items: center;
  color: #3c4761;
  padding-bottom: 28rpx;
  border-bottom: 1px solid #e4e7ed90;
  margin-bottom: 36rpx;
  &:last-child {
    border-bottom: none;
    margin-bottom: 0;
  }
}
</style>
